<template>
  <view class="grabber-home">
    <!-- 顶部用户信息 -->
    <view class="user-header">
      <view class="user-info">
        <image src="/static/images/grabber-avatar.png" class="user-avatar" alt="用户头像"></image>
        <view class="info-text">
          <text class="user-name">王飞手</text>
          <text class="user-level">无人机飞手 Lv.3</text>
        </view>
      </view>
      <view class="balance-info">
        <text class="balance-label">账户余额</text>
        <text class="balance-amount">¥{{ balance }}</text>
        <button class="withdraw-btn" @click="gotoWithdraw">提现</button>
      </view>
    </view>
    
    <!-- 任务分类 -->
    <view class="task-categories">
      <scroll-view scroll-x="true" class="categories-scroll">
        <view class="category-item active" @click="filterTasks('all')">全部任务</view>
        <view class="category-item" @click="filterTasks('aerial')">航拍任务</view>
        <view class="category-item" @click="filterTasks('inspection')">巡检任务</view>
        <view class="category-item" @click="filterTasks('mapping')">测绘任务</view>
        <view class="category-item" @click="filterTasks('delivery')">配送任务</view>
        <view class="category-item" @click="filterTasks('training')">培训任务</view>
      </scroll-view>
    </view>
    
    <!-- 任务列表 -->
    <view class="task-list">
      <view class="list-header">
        <text class="title">附近可抢任务</text>
        <view class="filter-options">
          <button class="filter-btn" @click="sortByDistance">
            <i class="iconfont icon-distance"></i> 距离
          </button>
          <button class="filter-btn" @click="sortByPrice">
            <i class="iconfont icon-price"></i> 价格
          </button>
        </view>
      </view>
      
      <view class="task-card" v-for="(task, index) in filteredTasks" :key="index">
        <view class="task-header">
          <text class="task-title">{{ task.title }}</text>
          <text class="task-price">¥{{ task.price }}</text>
        </view>
        
        <view class="task-details">
          <view class="detail-item">
            <i class="iconfont icon-location"></i>
            <text class="detail-text">{{ task.location }} ({{ task.distance }}km)</text>
          </view>
          <view class="detail-item">
            <i class="iconfont icon-time"></i>
            <text class="detail-text">{{ task.date }} {{ task.time }}</text>
          </view>
          <view class="detail-item">
            <i class="iconfont icon-type"></i>
            <text class="detail-text">{{ task.type }}</text>
          </view>
        </view>
        
        <view class="task-footer">
          <text class="publisher">发布者: {{ task.publisher }}</text>
          <button class="grab-btn" @click="grabTask(task.id)" :disabled="task.grabbed">
            {{ task.grabbed ? '已抢单' : '立即抢单' }}
          </button>
        </view>
      </view>
    </view>
    
    <!-- 进行中任务 -->
    <view class="section" v-if="ongoingTasks.length > 0">
      <view class="section-header">
        <text class="section-title">进行中任务</text>
        <text class="more" @click="viewAllTasks">查看全部</text>
      </view>
      
      <view class="ongoing-task" v-for="(task, index) in ongoingTasks" :key="index">
        <text class="task-name">{{ task.title }}</text>
        <text class="task-status">{{ task.status }}</text>
        <button class="operate-btn" @click="gotoTaskDetail(task.id)">去完成</button>
      </view>
    </view>
    
    <!-- 底部导航 -->
    <view class="tab-bar">
      <view class="tab-item active">
        <i class="iconfont icon-task-list"></i>
        <text>任务大厅</text>
      </view>
      <view class="tab-item">
        <i class="iconfont icon-ongoing"></i>
        <text>进行中</text>
      </view>
      <view class="tab-item">
        <i class="iconfont icon-history"></i>
        <text>历史</text>
      </view>
      <view class="tab-item">
        <i class="iconfont icon-wallet"></i>
        <text>钱包</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 账户余额
      balance: 2580.50,
      
      // 任务列表
      allTasks: [
        {
          id: 1,
          title: '建筑工程航拍巡检',
          price: 800,
          location: '深圳市南山区科技园',
          distance: 2.5,
          date: '2023-06-15',
          time: '09:00-12:00',
          type: '航拍任务',
          publisher: '城建集团',
          grabbed: false
        },
        {
          id: 2,
          title: '农田作物生长情况测绘',
          price: 1200,
          location: '广州市白云区农田基地',
          distance: 15.3,
          date: '2023-06-16',
          time: '全天',
          type: '测绘任务',
          publisher: '农业科技公司',
          grabbed: false
        },
        {
          id: 3,
          title: '电力线路巡检',
          price: 1500,
          location: '佛山市南海区',
          distance: 23.7,
          date: '2023-06-17',
          time: '08:00-16:00',
          type: '巡检任务',
          publisher: '南方电网',
          grabbed: true
        },
        {
          id: 4,
          title: '婚礼现场航拍',
          price: 500,
          location: '深圳市福田区婚礼会馆',
          distance: 5.8,
          date: '2023-06-20',
          time: '14:00-17:00',
          type: '航拍任务',
          publisher: '幸福婚礼策划',
          grabbed: false
        }
      ],
      
      // 筛选后的任务
      filteredTasks: [],
      
      // 当前筛选条件
      currentFilter: 'all',
      
      // 进行中的任务
      ongoingTasks: [
        {
          id: 3,
          title: '电力线路巡检',
          status: '进行中',
          deadline: '今天 16:00'
        },
        {
          id: 5,
          title: '景区全景拍摄',
          status: '待开始',
          deadline: '明天 10:00'
        }
      ]
    };
  },
  onLoad() {
    // 检查用户角色
    this.checkUserRole();
    // 初始化任务列表
    this.filteredTasks = [...this.allTasks];
  },
  methods: {
    // 检查用户角色是否正确
    checkUserRole() {
      const role = uni.getStorageSync('selectedRole');
      if (role !== 'grabber') {
        uni.redirectTo({
          url: '/pages/roleSelect/roleSelect'
        });
      }
    },
    
    // 筛选任务
    filterTasks(type) {
      this.currentFilter = type;
      if (type === 'all') {
        this.filteredTasks = [...this.allTasks];
      } else {
        // 根据任务类型筛选
        const typeMap = {
          'aerial': '航拍任务',
          'inspection': '巡检任务',
          'mapping': '测绘任务',
          'delivery': '配送任务',
          'training': '培训任务'
        };
        this.filteredTasks = this.allTasks.filter(task => task.type === typeMap[type]);
      }
    },
    
    // 按距离排序
    sortByDistance() {
      this.filteredTasks.sort((a, b) => a.distance - b.distance);
    },
    
    // 按价格排序
    sortByPrice() {
      this.filteredTasks.sort((a, b) => b.price - a.price);
    },
    
    // 抢单操作
    grabTask(taskId) {
      const task = this.allTasks.find(item => item.id === taskId);
      if (task && !task.grabbed) {
        uni.showModal({
          title: '确认抢单',
          content: `确定要抢取【${task.title}】任务吗？`,
          success: (res) => {
            if (res.confirm) {
              task.grabbed = true;
              this.filteredTasks = [...this.allTasks];
              
              // 添加到进行中任务
              this.ongoingTasks.unshift({
                id: task.id,
                title: task.title,
                status: '待开始',
                deadline: `${task.date} ${task.time}`
              });
              
              uni.showToast({
                title: '抢单成功',
                icon: 'success'
              });
              
              // 实际项目中这里会调用API提交抢单请求
            }
          }
        });
      }
    },
    
    // 前往提现页面
    gotoWithdraw() {
      uni.navigateTo({
        url: '/pages/grabber/withdraw'
      });
    },
    
    // 查看所有任务
    viewAllTasks() {
      uni.navigateTo({
        url: '/pages/grabber/allTasks'
      });
    },
    
    // 前往任务详情
    gotoTaskDetail(taskId) {
      uni.navigateTo({
        url: `/pages/grabber/taskDetail?id=${taskId}`
      });
    }
  }
};
</script>

<style scoped>
.grabber-home {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 100rpx;
}

.user-header {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  padding: 30rpx 25rpx;
  color: #fff;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.user-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  margin-right: 20rpx;
}

.info-text {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 34rpx;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.user-level {
  font-size: 26rpx;
  opacity: 0.9;
}

.balance-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.balance-label {
  font-size: 26rpx;
  opacity: 0.9;
}

.balance-amount {
  font-size: 36rpx;
  font-weight: bold;
  margin: 0 20rpx;
  flex: 1;
}

.withdraw-btn {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 30rpx;
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
}

.task-categories {
  background-color: #fff;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f1f5f9;
}

.categories-scroll {
  white-space: nowrap;
  padding: 0 20rpx;
}

.category-item {
  display: inline-block;
  padding: 12rpx 30rpx;
  margin-right: 10rpx;
  font-size: 28rpx;
  border-radius: 30rpx;
  color: #64748b;
}

.category-item.active {
  background-color: #dbeafe;
  color: #2563eb;
  font-weight: bold;
}

.task-list {
  padding: 20rpx;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1e293b;
}

.filter-options {
  display: flex;
  gap: 10rpx;
}

.filter-btn {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1rpx solid #e2e8f0;
  color: #64748b;
  font-size: 24rpx;
  padding: 0 20rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 25rpx;
}

.filter-btn .iconfont {
  margin-right: 5rpx;
  font-size: 22rpx;
}

.task-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.task-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.task-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #1e293b;
  flex: 1;
}

.task-price {
  font-size: 30rpx;
  font-weight: bold;
  color: #dc2626;
  white-space: nowrap;
}

.task-details {
  margin-bottom: 20rpx;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
  font-size: 26rpx;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-item .iconfont {
  font-size: 26rpx;
  color: #3b82f6;
  margin-right: 15rpx;
  width: 30rpx;
  text-align: center;
}

.detail-text {
  color: #64748b;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15rpx;
  border-top: 1rpx dashed #f1f5f9;
}

.publisher {
  font-size: 24rpx;
  color: #94a3b8;
}

.grab-btn {
  background-color: #f97316;
  color: #fff;
  border-radius: 25rpx;
  padding: 0 30rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 26rpx;
}

.grab-btn:disabled {
  background-color: #94a3b8;
}

.section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 25rpx;
  margin: 0 20rpx 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #1e293b;
}

.more {
  font-size: 26rpx;
  color: #3b82f6;
}

.ongoing-task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f1f5f9;
}

.ongoing-task:last-child {
  border-bottom: none;
}

.task-name {
  font-size: 28rpx;
  color: #1e293b;
  flex: 1;
}

.task-status {
  font-size: 26rpx;
  padding: 3rpx 15rpx;
  border-radius: 15rpx;
  margin: 0 20rpx;
}

.task-status.进行中 {
  background-color: #fee2e2;
  color: #dc2626;
}

.task-status.待开始 {
  background-color: #dbeafe;
  color: #2563eb;
}

.operate-btn {
  background-color: #3b82f6;
  color: #fff;
  border-radius: 25rpx;
  padding: 0 25rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 24rpx;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  border-top: 1rpx solid #f1f5f9;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  color: #94a3b8;
}

.tab-item .iconfont {
  font-size: 40rpx;
  margin-bottom: 5rpx;
}

.tab-item.active {
  color: #3b82f6;
}
</style>
